<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

<style>
  select {
    /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
    border: solid 2px palevioletred;


    /*很关键：将默认的select选择框样式清除*/

    appearance: none;

    -moz-appearance: none;

    -webkit-appearance: none;


    /*在选择框的最右侧中间显示小箭头图片*/

    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


    /*为下拉小箭头留出一点位置，避免被文字覆盖*/

    padding-right: 14px;

  }


  /*清除ie的默认选择框样式清除，隐藏下拉箭头*/

  select::-ms-expand {
    display: none;
  }

  option {
    /*用div的样式代替select的样式*/
    margin: 100px;
    width: 140px;
    height: 40px;
    /*border-radius: 5px;*/
    /*盒子阴影修饰作用,自己随意*/
    /* box-shadow: 0 0 5px #ccc;*/
    border: 1px solid #cccccc;
    position: relative;
  }

  option select {
    /*清除select的边框样式*/
    border: none;
    /*清除select聚焦时候的边框颜色*/
    outline: none;
    /*将select的宽高等于div的宽高*/
    width: 100%;
    height: 40px;
    line-height: 40px;
    /*隐藏select的下拉图标*/
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*通过padding-left的值让文字居中*/
    padding-left: 20px;
  }

  /*使用伪类给select添加自己想用的图标*/
  option:after {
    content: "";
    width: 14px;
    height: 8px;
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat center;
    /*通过定位将图标放在合适的位置*/
    position: absolute;
    right: 20px;
    top: 41%;
    /*给自定义的图标实现点击下来功能*/
    pointer-events: none;
  }

</style>


<body>
<div id="app">
  <select id="abc" v-model="onevalue">
    <option v-for="i in oneData">
      {{i.name}}
    </option>
  </select>

  <select id="abc2" v-model="twovalue">
    <option v-for="i in twoData">{{i.name}}</option>
  </select>
  <select id="abc3" v-model="threevalue">
    <option v-for="i in threeData">{{i.name}}</option>
  </select>
</div>


<script>
  let adc = new Vue({
    el: "#app",
    data: {
      oneData: [],
      onevalue: "",
      twoData: [],
      twovalue: "",
      threeData: [],
      threevalue: "",
    },
    created: function () {
      this.$http({
        method: "GET",
        url: "/findByDeep",
        params: {
          deep: 0,
          pid: 0
        }
      }).then(response => {
        // get body data
        this.oneData = response.body;

      }, response => {
        // error callback
        console.log("error response")
      });
    },
    watch: {
      onevalue() {
        const eq = this.onevalue
        let result = this.oneData.filter(function (i) {
          return i.name === eq;
        })
        const pid = result[0].id
        const deep = result[0].deep + 1
        this.$http({
          method: "GET",
          url: "/findByDeep",
          params: {
            deep: deep,
            pid: pid
          }
        }).then(response => {
          // get body data
          this.twoData = response.body;

        }, response => {
          // error callback
          console.log("error response")
        });
      },
      twovalue() {
        const eq = this.twovalue
        let result = this.twoData.filter(function (i) {
          return i.name === eq;
        })
        const pid = result[0].id
        const deep = result[0].deep + 1
        this.$http({
          method: "GET",
          url: "/findByDeep",
          params: {
            deep: deep,
            pid: pid
          }
        }).then(response => {
          // get body data
          this.threeData = response.body;

        }, response => {
          // error callback
          console.log("error response")
        });
      }
    }

  })
</script>

</body>
</html>